<template>
  <div id="index">
    <div class="main">
      <div class="center1 center">
        <img src="../assets/fenfa_c.png" alt="" />
        <button @click="$router.push('/uplodapp')" style="cursor: pointer">
          立即分发
        </button>
      </div>
    </div>
    <div class="main">
      <div class="center1 center">
        <button @click="$router.push('/webpackaging')" style="cursor: pointer">
          立即封装
        </button>
      </div>
    </div>

    <div class="main2">
      <h1>产品优势</h1>
      <i>欧啦-应用分发平台-免费应用内测分发托管平台-因为用心所以更专业</i>
    </div>

    <div class="main3">
      <div class="center center1">
        <div class="left">
          <div class="left_box">
            <div>
              <img src="../assets/Icon/adv1.png" alt="" />
              <i
                style="
                  font-size: 20px;
                  font-weight: 500;
                  color: #343434;
                  margin-left: 10px;
                "
                >资深专业开发团队</i
              >
            </div>
            <em style="color: #aaaebf">多年开发经验，提供免费解答技术疑问</em>
          </div>
          <div class="left_box">
            <div>
              <img src="../assets/Icon/adv2.png" alt="" />
              <i
                style="
                  font-size: 20px;
                  font-weight: 500;
                  color: #343434;
                  margin-left: 10px;
                "
                >服务多样化</i
              >
            </div>
            <em style="color: #aaaebf">专业团队研发定制，安全稳定有保证</em>
          </div>
          <div class="left_box">
            <div>
              <img src="../assets/Icon/adv3.png" alt="" />
              <i
                style="
                  font-size: 20px;
                  font-weight: 500;
                  color: #343434;
                  margin-left: 10px;
                "
                >专业的售后服务体系</i
              >
            </div>
            <em style="color: #aaaebf">极速售后响应，不分节假日客服轮流值守</em>
          </div>
        </div>
        <img src="../assets/p2.png" alt="" />
        <div class="right">
          <div class="right_box">
            <div>
              <img src="../assets/Icon/adv4.png" alt="" />
              <i
                style="
                  font-size: 20px;
                  font-weight: 500;
                  color: #343434;
                  margin-left: 10px;
                "
                >价格透明且优惠</i
              >
            </div>
            <em style="color: #aaaebf"
              >应用内测服务有多种价格套餐，价格优惠可按需购买</em
            >
          </div>
          <div class="right_box">
            <div>
              <img src="../assets/Icon/adv5.png" alt="" />
              <i
                style="
                  font-size: 20px;
                  font-weight: 500;
                  color: #343434;
                  margin-left: 10px;
                "
                >7*24小时客户服务</i
              >
            </div>
            <em style="color: #aaaebf"
              >提供24小时全天专业服务随时为用户解答疑惑</em
            >
          </div>
          <div class="right_box">
            <div>
              <img src="../assets/Icon/adv6.png" alt="" />
              <i
                style="
                  font-size: 20px;
                  font-weight: 500;
                  color: #343434;
                  margin-left: 10px;
                "
                >整合官方api</i
              >
            </div>
            <em style="color: #aaaebf"
              >整合多种应用自动化技术和常见问题，帮助您快速定位问题！</em
            >
          </div>
        </div>
      </div>
    </div>

    <div class="main4">
      <div style="display: flex; flex-direction: column; align-items: center">
        <i
          style="
            font-size: 30px;
            font-weight: 500;
            color: #343434;
            margin-bottom: 12px;
          "
          >服务理念</i
        >
        <em
          style="
            font-size: 14px;
            font-weight: 400;
            color: #b5b7c1;
            margin-top: 10px;
          "
          >欧啦应用内测分发平台-免费的APP应用内测分发托管平台,企业签名，为客户提供APP内测托管平台和免费的应用下载分发渠道!提供免费的应用托管、安卓Android应用的内测分发服务，支持游戏App分发公测。</em
        >
      </div>
    </div>

    <div class="main5">
      <div class="center center1">
        <div class="box">
          <img
            src="../assets/Icon2/serv1.png"
            alt=""
            width="46px"
            height="46px"
          />
          <p
            style="
              font-size: 20px;
              font-weight: 500;
              color: #343434;
              margin-bottom: 15px;
              margin: 15px 0;
            "
          >
            构建完善的服务平台
          </p>
          <i
            style="
              width: 304px;
              font-size: 16px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #aaaebf;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            "
            >致力于技术不断创新，以技术为服务的根基</i
          >
        </div>
        <div class="box">
          <img
            src="../assets/Icon2/serv2.png"
            alt=""
            width="46px"
            height="46px"
          />
          <p
            style="
              font-size: 20px;
              font-weight: 500;
              color: #343434;
              margin-bottom: 15px;
              margin: 15px 0;
            "
          >
            可视化中台服务
          </p>
          <i
            style="
              width: 304px;
              font-size: 16px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #aaaebf;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            "
            >用专业的技术打造出优质与实用的产品服务</i
          >
        </div>
        <div class="box">
          <img
            src="../assets/Icon2/serv3.png"
            alt=""
            width="46px"
            height="46px"
          />
          <p
            style="
              font-size: 20px;
              font-weight: 500;
              color: #343434;
              margin-bottom: 15px;
              margin: 15px 0;
            "
          >
            完善的售后服务
          </p>
          <i
            style="
              width: 304px;
              font-size: 16px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #aaaebf;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            "
            >专业的客服团队24小时轮流值班解决问题</i
          >
        </div>
        <div class="box">
          <img
            src="../assets/Icon2/serv4.png"
            alt=""
            width="46px"
            height="46px"
          />
          <p
            style="
              font-size: 20px;
              font-weight: 500;
              color: #343434;
              margin-bottom: 15px;
              margin: 15px 0;
            "
          >
            专业的技术保障
          </p>
          <i
            style="
              width: 304px;
              font-size: 16px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #aaaebf;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            "
            >致力于为全球的开发者提供更好的技术支持</i
          >
        </div>
        <div class="box">
          <img
            src="../assets/Icon2/serv5.png"
            alt=""
            width="46px"
            height="46px"
          />
          <p
            style="
              font-size: 20px;
              font-weight: 500;
              color: #343434;
              margin-bottom: 15px;
              margin: 15px 0;
            "
          >
            优质的用户体验
          </p>
          <i
            style="
              width: 304px;
              font-size: 16px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #aaaebf;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            "
            >以客户需求为目标打造优质良好的用户体验</i
          >
        </div>
        <div class="box">
          <img
            src="../assets/Icon2/serv6.png"
            alt=""
            width="46px"
            height="46px"
          />
          <p
            style="
              font-size: 20px;
              font-weight: 500;
              color: #343434;
              margin-bottom: 15px;
              margin: 15px 0;
            "
          >
            专业的研发团队
          </p>
          <i
            style="
              width: 304px;
              font-size: 16px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #aaaebf;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            "
            >有专业的技术研发团队打造安全稳定的平台</i
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user,
      token: (state) => state.token,
    }),
  },
  mounted() {
    let start = true;
    const main1 = document.querySelector(".main:nth-child(1)");
    const main2 = document.querySelector(".main:nth-child(2)");
    setInterval(() => {
      start = !start;
      if (start) {
        main1.style.display = "none";
        main2.style.display = "block";
      } else {
        main1.style.display = "block";
        main2.style.display = "none";
      }
    }, 3000);
  },
};
</script>

<style lang="scss" scoped>
#index {
  background-color: #fafbff;
}
.center {
  width: 1200px;
  margin: 0 auto;
}
.main:nth-child(1) {
  background: url("../assets/tfsign.png");
  height: 540px;
  padding-top: 100px;
  .center1 {
    height: 100%;
    display: flex;
    flex-direction: column;
    img {
      width: 100%;
      height: 420px;
    }
    button {
      width: 140px;
      height: 36px;
      color: #fff;
      text-align: center;
      background-color: rgba(0, 0, 0, 0);
      border: 1px solid rgba(255, 255, 255, 0.6);
      border-radius: 4px;
      margin-top: -80px;
    }
  }
}
.main:nth-child(2) {
  display: none;
  background: url("../assets/fengzhuang_c.png") no-repeat;
  height: 429px;
  button {
    width: 140px;
    height: 36px;
    color: #fff;
    text-align: center;
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 4px;
    margin-top: 300px;
  }
}
.main2 {
  margin-top: 93px;
  display: flex;
  flex-direction: column;
  align-items: center;
  h1 {
    font-size: 30px;
    font-weight: 500;
    color: #343434;
    margin-bottom: 12px;
  }
  i {
    font-size: 14px;
    font-weight: 400;
    color: #b5b7c1;
  }
}
.main3 {
  height: 426px;
  margin-top: 40px;
  .center1 {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      display: flex;
      flex-direction: column;
      .left_box {
        width: 348px;
        height: 116px;
        border: 1px solid #eef0f6;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
      }
      .left_box:nth-child(1) {
        border-radius: 0px 40px 0px 0px;
      }
      .left_box:nth-child(2) {
        margin: 20px 0;
      }
      .left_box:nth-last-child(1) {
        border-radius: 0px 0px 40px 0px;
      }
    }
    > img {
      width: 500px;
      height: 378px;
    }
    .right {
      display: flex;
      flex-direction: column;
      .right_box {
        width: 348px;
        height: 116px;
        border: 1px solid #eef0f6;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
      }
      .right_box:nth-child(1) {
        border-radius: 40px 0px 0px 0px;
      }
      .right_box:nth-child(2) {
        margin: 20px 0;
      }
      .right_box:nth-last-child(1) {
        border-radius: 0px 0px 0px 40px;
      }
    }
  }
}
.main4 {
  margin-top: 20px;
}
.main5 {
  margin-top: 30px;
  .center1 {
    height: 430px;
    display: flex;
    flex-flow: row wrap;
    align-content: space-around;
    justify-content: space-between;
    .box {
      width: 380px;
      height: 200px;
      border: 1px solid #eef0f6;
      padding: 20px;
    }
  }
}
</style>
